<template>
  <div class="addBrand-container">
    <div class="container">
      <div class="picture" style="margin: 30px ;">
        <el-row :gutter="50">
          <el-col :span="5" offset="6">
            <el-card :body-style="{ padding: '0px' }">
              <img
                src="https://sky-lxt-tlias.oss-cn-beijing.aliyuncs.com/6aa6a8fa-649e-489b-89ee-46376dfcfa91.jpg"
                class="image"
              />
              <div style="padding: 14px;">
                <span>比对源</span>
                <div class="bottom clearfix">
                  <p style="font-size: 13px; color: #999;">女 21</p>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="5">
            <el-card :body-style="{ padding: '0px' }">
              <div style="display: flex; justify-content: center;">
                <image-upload
                  class="image"
                  :prop-image-url="imageFaceUrl"
                  @imageChange="imageFaceChange"
                ></image-upload>
              </div>
              <div style="padding: 14px;">
                <span>检测源</span>
                <div class="bottom clearfix">
                  <p style="font-size: 13px; color: #999;">
                    {{ String(faceForm.sex) === '1' ? '女' : '男' }} {{ faceForm.age }}
                  </p>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row>
          <el-col :offset="10">
            <el-button type="primary" @click="getFaceResult"
              >开始比对</el-button
            >
          </el-col>
        </el-row>
        <el-row>
          识别结果:
        </el-row>
        <el-row>
          <el-collapse v-model="activeName" accordion>
            <el-collapse-item title="比对源特征值大小" name="1">
              <div>
                值： {{ faceForm.feature0 }}
              </div>
              <div>
                说明：比对源的特征值大小
              </div>
            </el-collapse-item>
            <el-collapse-item title="检测源特征值大小" name="2">
              <div>
                值：{{ faceForm.feature1 }}
              </div>
              <div>
                说明：检测源的特征值大小
              </div>
            </el-collapse-item>
            <el-collapse-item title="相似度" name="3">
              <div>
                值：{{ faceForm.faceSimilar }}
              </div>
              <div>
                说明：二者的相似度，相似度越高，说明越相似
              </div>
            </el-collapse-item>
            <el-collapse-item title="检测源性别/年龄" name="4">
              <div>
                性别：{{ String(faceForm.sex) === '1' ? '女' : '男' }}
              </div>
              <div>
                年龄：{{ faceForm.age }}
              </div>
              <div>
                说明：检测源的性别和年龄
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import HeadLable from '@/components/HeadLable/index.vue'
import ImageUpload from '@/components/ImgUpload/index.vue'
import { querySetmealById, addSetmeal, editSetmeal } from '@/api/setMeal'
import { getCategoryList } from '@/api/dish'
import { getFace } from '@/api/case'
import { baseUrl } from '@/config.json'

@Component({
  name: 'addShop',
  components: {
    HeadLable,
    ImageUpload
  }
})
export default class extends Vue {
  private imageFaceUrl: string = ''
  private activeName: string = '1'
  private faceForm = {
    feature0: '',
    feature1: '',
    faceSimilar: '',
    sex: '',
    age: ''
  }

  // 获取人脸比对结果
  public getFaceResult() {
    console.log(this.imageFaceUrl)
    getFace(this.imageFaceUrl).then(res => {
      if (res && res.data && res.data.code === 1) {
        this.faceForm = res.data.data
        this.faceForm.feature0 = res.data.data.feature0
        this.faceForm.feature1 = res.data.data.feature1
        this.faceForm.faceSimilar = res.data.data.faceSimilar
        this.faceForm.sex = res.data.data.sex
        this.faceForm.age = res.data.data.age
        console.log(this.faceForm)
      } else {
        this.$message.error(res.data.msg)
      }
    })
  }

  imageFaceChange(value: any) {
    this.imageFaceUrl = value
  }
}
</script>

<style>
.avatar-uploader .el-icon-plus:after {
  position: absolute;
  display: inline-block;
  content: ' ' !important;
  left: calc(50% - 20px);
  top: calc(50% - 40px);
  width: 40px;
  height: 40px;
  background: url('./../../assets/icons/icon_upload@2x.png') center center
    no-repeat;
  background-size: 20px;
}
</style>
<style lang="scss">
// .el-form-item__error {
//   top: 90%;
// }
.addBrand-container {
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #ffc200;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 290px;
    height: 290px;
    line-height: 160px;
    text-align: center;
  }

  .avatar {
    width: 290px;
    height: 290px;
    display: block;
  }

  // .el-form--inline .el-form-item__content {
  //   width: 293px;
  // }

  .el-input {
    width: 293px;
  }

  .address {
    .el-form-item__content {
      width: 777px !important;
    }
  }
  .el-input__prefix {
    top: 2px;
  }

  .addDish {
    .el-input {
      width: 130px;
    }

    .el-input-number__increase {
      border-left: solid 1px #fbe396;
      background: #fffbf0;
    }

    .el-input-number__decrease {
      border-right: solid 1px #fbe396;
      background: #fffbf0;
    }

    input {
      border: 1px solid #fbe396;
    }

    .table {
      border: solid 1px #ebeef5;
      border-radius: 3px;

      th {
        padding: 5px 0;
      }

      td {
        padding: 7px 0;
      }
    }
  }

  .addDishList {
    .seachDish {
      position: absolute;
      top: 12px;
      right: 20px;
    }

    .el-dialog__footer {
      padding-top: 27px;
    }

    .el-dialog__body {
      padding: 0;
      border-bottom: solid 1px #efefef;
    }
    .seachDish {
      .el-input__inner {
        height: 40px;
        line-height: 40px;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}

.like {
  cursor: pointer;
  font-size: 25px;
  display: inline-block;
}

.image {
  width: 100%;
  height: 292px;
  display: block;
}
.addBrand {
  &-container {
    margin: 30px;

    .container {
      position: relative;
      z-index: 1;
      background: #fff;
      padding: 30px;
      border-radius: 4px;
      min-height: 500px;

      .subBox {
        padding-top: 30px;
        text-align: center;
        border-top: solid 1px $gray-5;
      }
      .el-input {
        width: 350px;
      }
      .addDish {
        width: 777px;

        .addBut {
          background: #ffc200;
          display: inline-block;
          padding: 0px 20px;
          border-radius: 3px;
          line-height: 40px;
          cursor: pointer;
          border-radius: 4px;
          color: #333333;
          font-weight: 500;
        }

        .content {
          background: #fafafb;
          padding: 20px;
          border: solid 1px #d8dde3;
          border-radius: 3px;
        }
      }
    }
  }
}
</style>
